<template>
  <div class="filter">
    <div class="filter-content">
      <div class="table-filter" v-for="(item, index) in option" :key="index">
        <label class="filter-label">{{item.label}}</label>

        <div class="table-filter-input" v-if="item.type === 'select'">
          <el-select size="small" v-model="filterData[item.name]" :clearable="true" :placeholder="item.placeholder || '请选择'" @change="(value) => handleChange(value, item)">
            <el-option v-for="option in item.options(item, $store)" :key="option.value + '-select'" :label="option.label" :value="option.value"></el-option>
          </el-select>
        </div>

        <div class="table-filter-input" v-else-if="item.type==='number'">
          <el-input v-model.number="filterData[item.name]" :clearable="true" :placeholder="item.placeholder || '请输入'" size="small" />
        </div>
        <div class="table-filter-input" v-else-if="item.type==='date'">
          <el-date-picker v-model="filterData[item.name]" type="date" placeholder="选择日期" size="small" />
        </div>
        <div class="table-filter-input" v-else>
          <el-input v-model="filterData[item.name]" :clearable="true" :placeholder="item.placeholder || '请输入'" size="small" />
        </div>
      </div>
      <a v-if="option.length" class="filter-reset" href="javascript:void(0)" @click="filterData={};$emit('handle-filter', filterData)">重置</a>
    </div>

    <div class="filter-action">
      <template v-if="option.length">
        <el-button v-if="option.length" size="small" type="primary" @click="$emit('handle-filter', filterData)">
          <i class="el-icon-search" /> 查询
        </el-button>
      </template>
      <el-button v-if="showBtn" type="success" size="small" icon="el-icon-plus" @click.stop="$emit('handle-add')">新增</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "filter-table",
  props: {
    option: {
      type: Array,
      required: true
    },
    showBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterData: {}
    };
  },
  created() {
    this.option.forEach(option => {
      if (option.auto_dispatch) {
        this.$store.dispatch(option.auto_dispatch);
      }
    });
  },
  methods: {
    resetFilter() {
      this.filterData = {};
    },
    // 级联选择
    handleChange(value, item) {
      if (item.cascader) {
        let cascader = item.cascader;
        this.option.forEach(option => {
          if (option.name === cascader) {
            this.$store.dispatch(option.dispatch, value);
            this.filterData[cascader] && (this.filterData[cascader] = "");
          }
        });
      }
    }
  }
};
</script>
<style lang="scss">
.filter {
  margin: 12px 0;
  &-content {
    width: calc(100% - 240px);
    float: left;
  }
  &-action {
    float: right;
    padding-top: 2px;
    width: 240px;
    text-align: center;
    button {
      display: inline-block;
    }
  }
  &-reset {
    margin: 0 8px;
    font-size: 14px;
    line-height: 34px;
    color: #999;
    &:hover {
      color: #409eff;
    }
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.table-filter {
  display: inline-block;
  margin: 4px 16px 4px 0;
  label {
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    text-align: right;
    width: 66px;
  }
  &-input,
  &-button {
    width: 160px;
    display: inline-block;
  }
  &-button {
    width: 220px;
    margin-left: 16px;
  }
}
</style>


